<template>
	<view :class="['page',{'iphoneX':isIphoneX}]"> 
		<template v-if="isLogin">
			<view class="body">
				<view class="form-wrap m-b2"> 
					<view class="form-item">
						<view class="label" style="width: 25%;">上报类型：</view>
						<picker class="form-picker" mode="selector" :range="type.data" range-key="name" disabled>
							<view class="picker">
								<input type="text" class="select-data t-r" v-model="type.select.name" placeholder="选择上报类型" disabled> 
								<view class="icon">
									<view class="iconfont f-s68">&#xeb8a;</view>
								</view>
							</view>
						</picker>
					</view>
					<!-- 按月 -->
					<template v-if="type.select.id==1">
						<view class="form-item">
							<view class="label" style="width: 25%;">上报时间：</view>							
							<picker class="form-picker" mode="selector" :range="select_month" range-key="name" @change="changeDate($event,1)">
								<view class="picker">
									<input type="text" class="select-data t-r" v-model="params.date" placeholder="选择上报月份" disabled> 
									<view class="icon">
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</view>
							</picker> 
						</view>
					</template> 
					<!-- 按周 -->
					<template v-if="type.select.id==2">
						<view class="form-item">
							<view class="label" style="width: 25%;">上报时间：</view> 							
							<picker class="form-picker" mode="selector"  :range="select_data" range-key="date" @change="changeDate($event,2)">
								<view class="picker">
									<input type="text" class="select-data t-r" v-model="params.date" placeholder="选择上报周期" disabled> 
									<view class="icon">
										<view class="iconfont f-s68">&#xeb8a;</view>
									</view>
								</view>
							</picker>
						</view>
					</template>					
				</view>
				<view class="status" v-if="type.select.id&&params.is_bb==1">本{{type.select.id==1?'月':'周'}}数据已上报</view>

				<view v-if="type.select.id" class="prev-btn" @click="showPrevData">
					<text>{{isShowPrevData?'隐藏':'显示'}}上{{type.select.id==1?'月':'周'}}数据</text>
				</view>

				<view class="form-wrap">
					<template>
						<view class="form-item">
							<view class="label">一级发生面积：</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.fs_area_one" placeholder="输入一级发生面积" />
									<view class="link">亩</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.fs_area_one">
								<text class="val">{{prev_data.fs_area_one}}</text> 亩，
								<text class="use-btn" @click="usePrevData('fs_area_one',prev_data.fs_area_one)">引用</text> 
							</template>
							<text v-else class="val">暂无</text>
						</view>
					</template>

					<template>
						<view class="form-item">
							<view class="label">二级发生面积：</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.fs_area_two" placeholder="输入二级发生面积" />
									<view class="link">亩</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.fs_area_two">							
								<text class="val">{{prev_data.fs_area_two}}</text> 亩，
								<text class="use-btn" @click="usePrevData('fs_area_two',prev_data.fs_area_two)">引用</text>
							</template>
							<text v-else class="val">暂无</text>
						</view>
					</template>

					<template>
						<view class="form-item">
							<view class="label">三级发生面积：</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.fs_area_thr" placeholder="输入三级发生面积" />
									<view class="link">亩</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.fs_area_thr">
								<text class="val">{{prev_data.fs_area_thr}}</text> 亩，
								<text class="use-btn" @click="usePrevData('fs_area_thr',prev_data.fs_area_thr)">引用</text>
							</template>
							<text v-else class="val">暂无</text>
						</view>
					</template>

					<template>
						<view class="form-item">
							<view class="label">四级发生面积：</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.fs_area_for" placeholder="输入四级发生面积" />
									<view class="link">亩</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.fs_area_for">
							<text class="val">{{prev_data.fs_area_for}}</text> 亩，
							<text class="use-btn" @click="usePrevData('fs_area_for',prev_data.fs_area_for)">引用</text>
							</template>
							<text v-else class="val">暂无</text>
						</view>
					</template>

					<template>
						<view class="form-item">
							<view class="label">五级发生面积：</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.fs_area_fiv" placeholder="输入五级发生面积" />
									<view class="link">亩</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.fs_area_fiv">
							<text class="val">{{prev_data.fs_area_fiv}}</text> 亩，
							<text class="use-btn" @click="usePrevData('fs_area_fiv',prev_data.fs_area_fiv)">引用</text>
							</template>
							<text v-else class="val">暂无</text>
						</view>
					</template>

					<template>
						<view class="form-item">
							<view class="label">防控面积：</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.fk_area" placeholder="输入防治面积" />
									<view class="link">亩</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.fk_area">
								<text class="val">{{prev_data.fk_area}}</text> 亩，
								<text class="use-btn" @click="usePrevData('fk_area',prev_data.fk_area)">引用</text>
							</template>
								<text v-else class="val">暂无</text>
						</view>
					</template>

					<template>
						<view class="form-item">
							<view class="label">投入药剂：</view>
							<view class="form-input">
								<view class="content">
									<input type="digit" class="inp" v-model="params.yj_total" placeholder="输入投入药剂" />
									<view class="link">公斤</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.yj_total">
							<text class="val">{{prev_data.yj_total}}</text> 亩，
							<text class="use-btn" @click="usePrevData('yj_total',prev_data.yj_total)">引用</text>
							</template>
							<text v-else class="val">暂无</text>
						</view>
					</template>

					<template>
						<view class="form-item">
							<view class="label">监测防控人次：</view>
							<view class="form-input">
								<view class="content">
									<input type="number" class="inp" v-model="params.jcfk_total" placeholder="输入监测防控人次" />
									<view class="link">人次</view>
								</view>
							</view>
						</view>
						<view v-if="isShowPrevData" class="prev-data">
							上{{type.select.id==1?'月':'周'}}参考值：
							<template v-if="prev_data.jcfk_total">
								<text class="val">{{prev_data.jcfk_total}}</text> 亩，
								<text class="use-btn" @click="usePrevData('jcfk_total',prev_data.jcfk_total)">引用</text>
							</template>
							<text v-else class="val">暂无</text>
						</view>
					</template>

					<view class="form-item">
						<view class="label a-t">备注：</view>
						<view class="form-textarea">
							<textarea class="inp-textarea" v-model="params.remark" placeholder="输入备注信息" maxlength="-1"></textarea>
						</view>
					</view>
				</view>

			</view>

			<!-- 底部 -->
			<view class="footer">
				<view class="fix-wrap bottom">
					<view class="btn" @click="submit">提交</view>
				</view>
			</view>


		</template>
	</view>
</template>

<script> 
	export default {
		name: 'name',
		data() {
			return {
				isLogin: true,
				isIphoneX: getApp().globalData.isIphoneX,
				isShowPrevData:false,
				isStop:true, 
				type:{
					select:{
						id:'',
						name:""
					},
					data:[
						{
							id:1,
							name:"月报"
						},
						{
							id:2,
							name:"周报"
						}
					]
				},
				params:{
					type:'',
					is_bb:0,
					date:"",
					week_id:'', 
					fs_area_one:'',
					fs_area_two:'',
					fs_area_thr:'',
					fs_area_for:'',
					fs_area_fiv:'',
					fk_area:'',
					yj_total:'',
					jcfk_total:'',
					remark:'', 
					is_month:0     // 1 月报   其他|空  为 周报
				},
				prev_data:{},
				select_data:[],
				select_month:[],
				ysb_type:'',
			}


		},
		async onLoad(params) { 
			this.isLogin = await this.$loginState('check');	
			this.ysb_type=params.type;
			if(this.isLogin){	 
				if(this.ysb_type==0){
					this.type.select={
						id:'2',
						name:"周报"
					};
					this.params.is_month=0;
					this.getSelectweek();
				}else{
					this.type.select={
						id:'1',
						name:"月报"
					};
					this.params.is_month=1;
					this.getSelectMonth();
				}			
			}			
		},
		async onShow() {
			
		},
		methods: {
			
			
			// 切换上报类型
			// changeType:function(e){
			// 	let idx=e.detail.value;
			// 	this.type.select.id=this.type.data[idx].id;
			// 	this.type.select.name=this.type.data[idx].name;
			// 	this.params.fs_area_one='';
			// 	this.params.fs_area_two='';
			// 	this.params.fs_area_thr='';
			// 	this.params.fs_area_for='';
			// 	this.params.fs_area_fiv='';
			// 	this.params.fk_area='';
			// 	this.params.yj_total='';
			// 	this.params.jcfk_total='';
			// 	this.params.remark=''; 
			// 	this.params.is_month="";
			// 	this.params.date="";
			// 	this.params.is_bb="";
			// 	this.isShowPrevData=false; 
			// 	this.prev_data={};
			// 	if(this.type.select.id==1){
			// 		this.getSelectMonth();
			// 	}else if(this.type.select.id==2){
			// 		this.getSelectweek();
			// 	}
			// },
			
			 
			// 选择上报时间
			changeDate:function(e,type){ 
				// type 1 月时间 2 周时间
				let idx=e.detail.value;
				this.params.fs_area_one='';
				this.params.fs_area_two='';
				this.params.fs_area_thr='';
				this.params.fs_area_for='';
				this.params.fs_area_fiv='';
				this.params.fk_area='';
				this.params.yj_total='';
				this.params.jcfk_total='';
				this.params.remark=''; 
				this.params.is_month=""
				this.isShowPrevData=false; 
				this.prev_data={};
				
				if(type==1){
					this.params.date=this.select_month[idx].name; 
					this.params.week_id=this.select_month[idx].value;
					this.params.is_month=1;
					this.params.is_bb=this.select_month[idx].status;
					this.getPrevData(this.select_month[idx].value);
				}else if(type==2){
					this.params.week_id=this.select_data[idx].week_id;
					this.params.date='第'+this.select_data[idx].week_num+'周 ('+this.select_data[idx].week_start+"至"+this.select_data[idx].week_end+')'; 
					this.params.is_bb=this.select_data[idx].status;
					this.params.is_month=0;
					
					this.getPrevData(this.select_data[idx].week_start);
				}
				
				
			},
			
			// 显示上周参考值
			showPrevData:function(){				
				if(this.params.is_bb==1){
					if(this.params.date==''){
						uni.showToast({
							icon: 'none',
							title: '请先选择补报时间',
							mask: true,
							duration: 1000
						})
					}else{
						this.isShowPrevData=!this.isShowPrevData; 
					}					
				}else{
					this.isShowPrevData=!this.isShowPrevData;					
				}
				
			},
			
			// 获取月数据
			getSelectMonth:async function(){
				let res=await this.$api.ysb_api.getSelectMonth(); 
				if(res.data.ret==0){ 
					this.select_month=res.data.data;
					this.params.is_month=1;
					this.params.date=this.select_month[this.select_month.length-1].name;
					this.params.week_id=this.select_month[this.select_month.length-1].value;
					this.params.is_bb=this.select_month[this.select_month.length-1].status;
					this.getPrevData(this.select_month[this.select_month.length-1].value); 
				}
			},
			
			
			// 获取周数据
			getSelectweek:async function(){
				let res=await this.$api.ysb_api.getSelectweek() 
				if(res.data.ret==0){ 
					res.data.data.forEach(item=>{
						item.date="第"+item.week_num+"周 ("+item.week_start+"至"+item.week_end+")"
					})
					this.select_data=res.data.data; 
					this.params.date=this.select_data[this.select_data.length-1].date;
					this.params.week_id=this.select_data[this.select_data.length-1].week_id;
					this.params.is_bb=this.select_data[this.select_data.length-1].status;
					this.getPrevData(this.select_data[this.select_data.length-1].week_start); 
				}
			},
			
			
			// 获取上周/月数据
			getPrevData:async function(s_date){
				
				// s_time 周报参数, w_id 月报参数  为 月份value
				let data={};
				if(this.type.select.id==1){ 
					data['is_month']=1;
					data['week_id']=s_date;
				}else if(this.type.select.id==2){
					data['add_time']=s_date;
				}
				let res=await this.$api.ysb_api.getPrevData(data)  
				if(res.data.ret==0){
					this.prev_data=res.data.data;
				}
			},
			
			// 引用上周数据
			usePrevData:function(name,val){
				this.params[name]=val;
			},
			
			// 提交数据
			submit:async function(){
				let _this=this; 
				
				if(this.type.select.name==''){
					uni.showToast({
						icon: 'none',
						title: '请先选择上报类型',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.fs_area_one==''){
					uni.showToast({
						icon: 'none',
						title: '请输入一级发生面积',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.fs_area_two==''){
					uni.showToast({
						icon: 'none',
						title: '请输入二级发生面积',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.fs_area_thr==''){
					uni.showToast({
						icon: 'none',
						title: '请输入三级发生面积',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.fs_area_for==''){
					uni.showToast({
						icon: 'none',
						title: '请输入四级发生面积',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.fs_area_fiv==''){
					uni.showToast({
						icon: 'none',
						title: '请输入五级发生面积',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.fk_area==''){
					uni.showToast({
						icon: 'none',
						title: '请输入防控面积',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.yj_total==''){
					uni.showToast({
						icon: 'none',
						title: '请输入投入药剂',
						mask: true,
						duration: 1000
					})
					return
				};
				if(this.params.jcfk_total==''){
					uni.showToast({
						icon: 'none',
						title: '请输入监测防控人次',
						mask: true,
						duration: 1000
					})
					return
				};
				
				if(this.isStop){
					this.isStop=false;
					let res=await this.$api.ysb_api.submit({
						week_id:this.params.week_id,
						fs_area_one:this.params.fs_area_one,
						fs_area_two:this.params.fs_area_two,
						fs_area_thr:this.params.fs_area_thr,
						fs_area_for:this.params.fs_area_for,
						fs_area_fiv:this.params.fs_area_fiv,
						fk_area:this.params.fk_area,
						yj_total:this.params.yj_total,
						jcfk_total:this.params.jcfk_total,
						remark:this.params.remark,
						is_month:this.params.is_month
					}); 
					if(res.data.ret==0){
						uni.showToast({
							icon: 'success',
							title: res.data.message,
							mask: true,
							duration: 1000,
							success() {
								setTimeout(()=>{
									_this.isStop=true;
									uni.navigateTo({ 
										url:'/package_yunshangbao/list/list?type='+_this.params.is_month, 
									})
								},300)
							}
						})
					}else{
						uni.showToast({
							image: '../../static/images/error.png',
							title: res.data.message,
							mask: true,
							duration: 1000,
							success() {
								setTimeout(()=>{
									_this.isStop=true;
								})
							}
						})
					}
					
				}
			}

		},
		components: { 
		},

		computed: {

		},
		watch: {

		}

	}
</script>

<style lang="less">
	.form-wrap .label {
		width: 35%;
	}

	.form-wrap .content .link {
		color: #000;
	}
	.status{
		padding:0 20rpx;
		color:#f00; 
		font-size: 28rpx;
	}
	.btn {
		@h: 80rpx;
		width: 98%;
		margin: 10rpx auto;
		text-align: center;
		height: @h;
		line-height: @h;
		background: linear-gradient(#e96b5c, #ce3c2f);
		border-radius: 10rpx;
		color: #fff;
		font-size: 34rpx;
	}

	.prev-btn {
		text-align: right;
		padding: 20rpx;

		text {
			padding: 4rpx 15rpx;
			background: #ff9600;
			border-radius: 8rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	.prev-data {
		padding: 18rpx 10rpx;
		background: #f5f5f5;
		text-align: right;
		color: #999;
		font-size: 28rpx;
		.val {
			color: #333;
		}

		.use-btn {
			color: #d03c30;
		}
	}
</style>
